<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>随访家园患者端</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="bookmark" href="/favicon.ico"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
	@import './assets/css/mint-ui.css';
	@import './assets/css/common.css';
	@import './assets/css/LArea.min.css';

	.info-content {padding: 40px 0;}
	.info-box .mint-cell-text,.info-box input{font-size: 14px;background-color: transparent;}
	.info-img-box,.info-main-box{margin-bottom: 0;}
	.info-main-box:nth-last-of-type(1){margin-bottom: 0;}
	.info-img-list .mint-cell:after,
	.info-img-list .mint-cell:before,
	.info-main-list .mint-cell:after,
	.info-main-box .info-main-list:nth-last-of-type(1) .mint-cell:before{border: 0;}
	.info-main-list .mint-field-state{display: none}
	.info-main-box .mint-cell{padding: 15px 10px;}
	.info-img{width: 37px;height: 37px;border-radius: 50%;overflow: hidden;position: absolute;right:10px;top:50%;margin-top: -18px;text-align: center;}
	.info-img img{width: 100%;min-height: 100%;height: auto}
	.info-img-list .mint-cell-text{line-height: 37px}
	.info-main-list .mint-cell:before{left: 10px;}
	.info-sex{margin-right: 30px;font-size: 14px;color: rgba(54,54,54,0.3);height: 24px;line-height: 24px;}
	.info-sex.leh-active{color: #000;}
	.info-sex .icon-wx-male,
	.info-sex .icon-wx-female{font-size: 14px;}
	.info-main-list .mint-cell-value .icon-wx-arr-right,
	.info-main-list .mint-cell-value .icon-wx-arr-down{color: #aaa;position: absolute;top:50%;right: 10px;margin-top: -8px}
	.info-main-list input{position: relative;display:block;}
</style>

<body id="info">


<div class="leh-wrap" style="top: 40px; bottom: 40px;">
	<div class="page-field info-box">
		<div class="page-part info-img-box">
			<div class="mint-field info-img-list">
				<a class="mint-cell mint-field-cell" @click="editPic">
					<label class="mint-cell-title">
						<span class="mint-cell-text">头像</span>
					</label>
					<div class="mint-cell-value">
						<input class="mint-field-core leh-bg-white" type="text" disabled="disabled">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
									<i class="mintui mintui-field-default"></i>
								</span>
						<div class="info-img">
							<img :src="photo" v-if="photo !== null"/>
							<img src="./assets/img/private.jpg" v-if="photo === null"/>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div class="leh-null-box"></div>
		<div class="page-part info-main-box">
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell">
					<label class="mint-cell-title">
						<span class="mint-cell-text">用户名</span>
					</label>
					<div class="mint-cell-value">
						<input readonly class="mint-field-core" placeholder="请输入姓名" type="text" :value="name">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
									<i class="mintui mintui-field-default"></i>
								</span>
					</div>
				</a>
			</div>
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell">
					<label class="mint-cell-title">
						<span class="mint-cell-text">性别</span>
					</label>
					<div class="mint-cell-value">
						<div class="info-sex" :class="{'leh-active': gender === 1 }" @click="gender = 1">
							<span class="iconfont icon-wx-male"></span>
							<span>男</span>
						</div>
						<div class="info-sex" :class="{'leh-active': gender === 2}" @click="gender = 2">
							<span class="iconfont icon-wx-female"></span>
							<span>女</span>
						</div>
					</div>
				</a>
			</div>
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell">
					<label class="mint-cell-title">
						<span class="mint-cell-text">生日</span>
					</label>
					<div class="mint-cell-value">
						<input class="mint-field-core" placeholder="请输入生日" type="date" v-model="birthday"  :value="birthday">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
									<i class="mintui mintui-field-default"></i>
								</span>
						<span class="iconfont icon-wx-arr-down"></span>
					</div>
				</a>
			</div>
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell">
					<label class="mint-cell-title">
						<span class="mint-cell-text">省市</span>
					</label>
					<div class="mint-cell-value">
					<!--	<input readonly class="mint-field-core" type="text" maxlength="10" @click="showPicker" :value="nativePlace">-->

						<input id="city" class="mint-field-core" type="text" readonly=""  :value="nativePlace"/>
						<input id="cityValue" type="hidden" />
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
									<i class="mintui mintui-field-default"></i>
								</span>
						<span class="iconfont icon-wx-arr-down"></span>
					</div>
				</a>
			</div>
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell">
					<label class="mint-cell-title">
						<span class="mint-cell-text">手机号</span>
					</label>
					<div class="mint-cell-value">
						<input readonly class="mint-field-core" placeholder="请输入手机号" type="text"  :value="mobile">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
								<i class="mintui mintui-field-default"></i>
							</span>
					</div>
				</a>
			</div>
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell">
					<label class="mint-cell-title">
						<span class="mint-cell-text">个人邮箱</span>
					</label>
					<div class="mint-cell-value">
						<input class="mint-field-core" maxlength="50" placeholder="登录邮箱" type="email" v-model="email"  :value="email">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
								<i class="mintui mintui-field-default"></i>
							</span>
					</div>
				</a>
			</div>
		</div>
		<div class="leh-null-box"></div>
		<div class="page-part info-main-box">
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell" @click="toDiseaseUrl()">
					<!--<a class="mint-cell mint-field-cell" v-link="{path: '/reg/disease', query: {info: true, diseaseinfo: disease}, replace: true}">-->
					<label class="mint-cell-title">
						<span class="mint-cell-text">所患疾病</span>
						<span class="leh-c-red">*</span>
					</label>
					<div class="mint-cell-value">
						<input class="mint-field-core leh-bg-white" type="text" readonly v-model="disease" :value="disease">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
									<i class="mintui mintui-field-default"></i>
								</span>
						<span class="iconfont icon-wx-arr-right"></span>
					</div>
				</a>
			</div>
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell">
					<label class="mint-cell-title">
						<span class="mint-cell-text">患病起始年限</span>
					</label>
					<div class="mint-cell-value">
						<input class="mint-field-core" placeholder="请输入日期" type="month" name="month" v-model="diseaseHis" :value="diseaseHis">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
									<i class="mintui mintui-field-default"></i>
								</span>
						<span class="iconfont icon-wx-arr-down"></span>
					</div>
				</a>
			</div>
			<div class="mint-field info-main-list">
				<a class="mint-cell mint-field-cell" @click="toIrritabilityUrl()">
					<!--<a class="mint-cell mint-field-cell" v-link="{path: '/user/irritability', query: {info: notAlllergicHis}, replace: true}">-->
					<label class="mint-cell-title">
						<span class="mint-cell-text">过敏史</span>
					</label>
					<div class="mint-cell-value">
						<input class="mint-field-core leh-bg-white" type="text" readonly v-model="alllergicHis" :value="alllergicHis">
						<div class="mint-field-clear" style="display: none;">
							<i class="mintui mintui-field-error"></i>
						</div>
						<span class="mint-field-state is-default">
									<i class="mintui mintui-field-default"></i>
								</span>
						<span class="iconfont icon-wx-arr-right"></span>
					</div>
				</a>
			</div>
		</div>
	</div>



</div>

<header class="mint-header is-fixed leh-bg-grey-head">
	<div class="mint-header-button is-left">
		<!--<a @click="historyBack">-->
		<a href="http://wx.jk7.com/home">
			<span class="iconfont icon-wx-arr-left leh-c-green"></span>
		</a>
	</div>
	<h1 class="mint-header-title leh-c-black">个人信息</h1>
	<div class="mint-header-button is-right"> </div>
</header>

<div class="leh-float-box">
	<button class="mint-button mint-button--green mint-button--large" @click="saveInfo">
		<label class="mint-button-text leh-c-white">保存</label>
	</button>
</div>

<script type='text/javascript' src='http://wx.jk7.com/html/js/zepto-v1.2.0-min.js' charset='utf-8'></script>
<script type="text/javascript" src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js' charset='utf-8'></script>
<script type="text/javascript" src='./assets/js/vue.min.js'></script>
<script type="text/javascript" src='./assets/js/LAreaData2.js'></script>
<script type="text/javascript" src='./assets/js/LArea.min.js'></script>

<script>
	var vue;
	function vue_init () {
		vue = new Vue({
			el: "#info",
			data: {
				visible: false,
				province: '',
				city: '',
				sex: 1,
				showpopup: false,
				tips: '',
				formPage: '', // 来自其他页面
				infoItems: '', // 信息
				name: '', // 姓名 ,
				mobile: '', // 手机 ,
				gender: '', // 性别 ,
				birthday: '', // 生日 ,
				alllergicHis: '', // 过敏史 ,
				notAlllergicHis: '', // 未省略过的过敏史 ,
				photo: '', // 头像 ,
				serverId: '', // 上传图片返回的serverId
				email: '', // 邮箱 ,
				disease: '', // 所患疾病 ,
				diseaseHis: '', // 患病年限 ,
				nativePlace: '', // 省市
				infoMain: '', // 临时保存所有数据
				paramsMain: [],
				loadBox: '<div class="ball-beat"><div></div><div></div><div></div></div>', // 加载主体
				loadmask: '<div class="maskbox"></div>', // 加载遮罩
			},
			created: function () {
				var area2 = new LArea();
				area2.init({
					'trigger': '#city',
					'valueTo': '#cityValue',
					'keys': {
						id: 'value',
						name: 'text'
					},
					'type': 2,
					'data': [provs_data, citys_data, dists_data]
				});
			},
			ready: function () {

				var _self = this

				// 获取URL参数
				function getQueryString (key) {
					var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
					var result = window.location.search.substr(1).match(reg);
					return result?decodeURIComponent(result[2]):null;
				}

				// 初始值
				this.openID = getQueryString('openID')*1
				if(getQueryString('alllergicHis')){
					_self.alllergicHis = getQueryString('alllergicHis')
					_self.notAlllergicHis = getQueryString('alllergicHis')
					if(_self.alllergicHis.length > 10) {
						_self.alllergicHis = _self.alllergicHis.substr(0,10) + '...'
					}
				}

				// 上传图片，验证签名
				function pageConfig() {

					$.ajax({
						url: 'http://wx.jk7.com/api/valid',
						type: 'GET',
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded',
						data: {
							pageurl: window.location.href
						},
						success: function (data) {
							wxconfig(data);
						}
					});
				}
				pageConfig()

				// 获取个人信息--从首页进入
				function myinfoFromHome() {
					$.ajax({
						url: 'http://wx.jk7.com/api/patient/myinfo',
						type: 'GET',
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded',
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (data) {

							$('.ball-beat').remove()
							$('.maskbox').remove()
							var rsp = data.data

							_self.name = rsp.name
							_self.mobile = rsp.mobile
							_self.gender = rsp.gender
							_self.birthday = rsp.birthday
							_self.notAlllergicHis = rsp.alllergicHis
							_self.photo = rsp.photo
							_self.email = rsp.email
							_self.disease = rsp.disease
							_self.diseaseHis = rsp.diseaseHis
							_self.nativePlace = rsp.nativePlace

							if(_self.openID == '2'){

								_self.gender = getQueryString('gender')*1
								_self.birthday = getQueryString('birthday')
								_self.notAlllergicHis = getQueryString('alllergicHis')
								_self.photo = getQueryString('photo')
								_self.email = getQueryString('email')
								_self.disease = getQueryString('disease')
								_self.diseaseHis = getQueryString('diseaseHis')
								_self.nativePlace = getQueryString('nativePlace')
								_self.serverId = getQueryString('serverId')
							}

							// 超过10个字加省略号
							if(_self.notAlllergicHis.length > 10) {
								_self.alllergicHis = _self.notAlllergicHis.substr(0,10) + '...'
							}else {
								_self.alllergicHis = _self.notAlllergicHis
							}

						}
					});
				}
				// 直接进入，获取身份ID
				function getOpenID() {
					var src = window.location.search;
					var a = src.indexOf('code');
					var b = src.indexOf('&state');

					var code = src.substr(a + 5, b - (a + 5));

					//获取openid
					$.ajax({
						url: 'http://wx.jk7.com/api/UserInfo',
						type: 'GET',
						dataType: "text",
						contentType: 'application/x-www-form-urlencoded',
						data: {
							code: code,
							state: "STATE"
						},
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (data) {

							$('.ball-beat').remove()
							$('.maskbox').remove()
							getAuthenticate(data)
						}
					});
				}
				// 身份验证
				function getAuthenticate (oID) {
					$.ajax({
						url: 'http://wx.jk7.com/api/Authenticate',
						type: 'GET',
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded',
						headers: {
							'Authorization': 'Basic ' + btoa(oID + ':')
						},
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (res) {

							$('.ball-beat').remove()
							$('.maskbox').remove()
							myinfo(oID)
						},
						error: function (res) {
							if (res.status === 401) {
								if (res.responseText == '2') {
									window.location.href='http://wx.jk7.com/reg/bind';
								} else if (res.responseText == '3') {
									window.location.href='http://wx.jk7.com/reg/register';
								} else if (res.responseText == '4') {
									window.location.href='http://wx.jk7.com/reg/disease';
								} else {
									alert('非法访问')
								}

								return;
							}
						}
					});
				}

				// 直接进入，获取个人信息
				function myinfo(oID) {
					$.ajax({
						url: 'http://wx.jk7.com/api/patient/myinfo',
						type: 'GET',
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded',
						headers: {
							'Authorization': 'Basic ' + btoa(oID + ':')
						},
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (data) {

							$('.ball-beat').remove()
							$('.maskbox').remove()
							var rsp = data.data

							_self.name = rsp.name
							_self.mobile = rsp.mobile
							_self.gender = rsp.gender
							_self.birthday = rsp.birthday
							_self.notAlllergicHis = rsp.alllergicHis
							_self.photo = rsp.photo
							_self.email = rsp.email
							_self.disease = rsp.disease
							_self.diseaseHis = rsp.diseaseHis
							_self.nativePlace = rsp.nativePlace

							if(_self.openID == '2'){

								_self.gender = getQueryString('gender')*1
								_self.birthday = getQueryString('birthday')
								_self.notAlllergicHis = getQueryString('alllergicHis')
								_self.photo = getQueryString('photo')
								_self.email = getQueryString('email')
								_self.disease = getQueryString('disease')
								_self.diseaseHis = getQueryString('diseaseHis')
								_self.nativePlace = getQueryString('nativePlace')
								_self.serverId = getQueryString('serverId')
							}

							// 超过10个字加省略号
							if(_self.notAlllergicHis.length > 10) {
								_self.alllergicHis = _self.notAlllergicHis.substr(0,10) + '...'
							}else {
								_self.alllergicHis = _self.notAlllergicHis
							}
						}
					});

				}

				if(!this.openID){
					getOpenID()
				}else{

					myinfoFromHome()
				}

				function wxconfig (data){
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: data.appId, // 必填，公众号的唯一标识
						nonceStr: data.nonceStr, // 必填，生成签名的随机串
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						signature: data.signature, // 必填，签名，见附录1
						jsApiList: [
							'checkJsApi',
							'chooseImage',
							'previewImage',
							'uploadImage',
							'downloadImage',
							'translateVoice'
						] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
				}

				wx.hideMenuItems({
					menuList: ["menuItem:share:appMessage","menuItem:share:timeline","menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QZone","menuItem:copyUrl","menuItem:originPage","menuItem:openWithQQBrowser","menuItem:openWithSafari"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
				});
			},
			methods: {
				toDiseaseUrl: function () {

					window.location.href='http://wx.jk7.com/reg/disease?info=true&gender='+
							this.gender +
							'&birthday='+
							this.birthday +
							'&alllergicHis='+
							this.notAlllergicHis +
							'&photo='+
							this.photo +
							'&serverId='+
							this.serverId +
							'&email='+
							this.email +
							'&disease='+
							this.disease +
							'&diseaseHis='+
							this.diseaseHis +
							'&nativePlace='+ $('#city').val() ;
				},
				toIrritabilityUrl: function () {

					window.location.href='http://wx.jk7.com/user/irritability?info=true&gender='+
							this.gender +
							'&birthday='+
							this.birthday +
							'&alllergicHis='+
							this.notAlllergicHis +
							'&photo='+
							this.photo +
							'&serverId='+
							this.serverId +
							'&email='+
							this.email +
							'&disease='+
							this.disease +
							'&diseaseHis='+
							this.diseaseHis +
							'&nativePlace='+ $('#city').val() ;

					//window.location.href='http://test.jk7.com/user/irritability?allHis='+ this.notAlllergicHis + '&diseaseinfo='+ this.disease + '&infoMail='+ this.infoMain;
				},
				showPicker: function () {
					this.visible = true
				},
				// 保存
				saveInfo: function () {

					var _self = this

					var email = _self.email;
					if (email != '') {
						var patrn = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
						if (!patrn.exec(email)) {
							_self.email = ''

							_self.showpopup = true
							_self.tips = '请输入合法的电子邮箱'
							return;
						}
					}

					var params = {
						"gender": _self.gender,
						"birthday": _self.birthday,
						"alllergicHis": _self.notAlllergicHis,
						"serverId": _self.serverId,
						"email": _self.email,
						"disease": _self.disease,
						"diseaseHis": _self.diseaseHis,
						"nativePlace": $('#city').val() //_self.nativePlace
					}

					$.ajax({
						type: "PUT",
						url: 'http://wx.jk7.com/api/patient/myinfo',
						data: params,
						dataType: 'json',
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (res) {

							$('.ball-beat').remove()
							$('.maskbox').remove()
							alert('修改成功')
						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert('网络出错')
							return;
						}
					});
				},

				// 修改头像
				editPic: function () {

					var _self = this
					wx.chooseImage({
						count: 1, // 默认9
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function(res) {

							var localIds = res.localIds[0].toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
							_self.photo = localIds
							_self.uploadImage(localIds)

						},
						fail: function (res) {
							alert(JSON.stringify(res));
						}
					});
				},

				uploadImage: function (localIds) {

					var _self = this
					wx.uploadImage({
						localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
						isShowProgressTips: 1, // 默认为1，显示进度提示
						success: function (res) {
							_self.serverId = res.serverId; // 返回图片的服务器端ID

						},
						fail: function(res) {
							alert(JSON.stringify(res));
						}
					});

				}

			}

		});

	}
	vue_init()




</script>



</body>
</html>
